<!-- 父组件通过属性的方式向子组件传递数据 -->
<!-- vue是单向数据流，即父组件传递的数据子组件只能拿来用，而不能修改。
至于为什么要有单向数据流，是因为假如父组件传递的是引用类型，那么，
如果子组件去修改了，那么假如其他组件也要使用，就会造成所有的数据被修改 -->
<!-- 那么如何解决呢？在子组件的data中使用新的数据去接收这个父组件传递过来的值就好了 -->
<!-- 子组件向父组件传值通过事件的形式传值 -->
<!-- 即使用 $emit 通过触发事件来传值。即先触发子组件的事件，
然后通过子组件的事件去使用 this.$emit("change"，1)。
这里的 change 是一个事件名，1 表示传递的参数。
然后 change 会触发父组件中的函数，就可以使用了 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <counter :count="1" @change="handleChange"></counter>
    <counter :count="2" @change="handleChange"></counter>
    <div>{{total}}</div>
  </div>

  <script>
    // 局部组件
    let counter={
      props:['count'],
      data(){
        return{
          number:this.count
        }
      },
      template:"<div @click='handleClick'>{{number}}</div>",
      methods:{
        handleClick:function(){
          this.number++
          this.$emit('change',1)
        }
      }
    }

    let app=new Vue({
      el:"#root",
      data:{
        total:5
      },
      methods:{
        handleChange(step){
          console.log(step);
        }
      },
      // 注册组件
      components:{
        counter:counter
      }
    })
  </script>
</body>
</html>